Button mouseover gradiant change

  • EXAMPLE 1

    1. html

    
                  <section class="gallery">      
            
                            
                            <ul class="nav nav-tabs">
                                  <li class="active"><a data-toggle="tab" href="#gal1">Video <br>
                                    Gallery</a></li>

                                  <li><a data-toggle="tab" href="#gal2">Image <br>
                                    Gallery</a></li>

                                  <li><a data-toggle="tab" href="#gal3">Testimonial <br>
                                    Portfolio</a></li>
                            </ul>
                        
                  
                    </section>

    2. css

    

                .gallery .nav-tabs {
	border: none;
	text-align: right;
	padding: 0;
}
.gallery .nav-tabs > li {
	float: none;
	margin: 0 0 3px 0;
	padding: 0;
	display: inline-block;
}



.gallery .nav-tabs > li > a {
	font-size: 12px;
  text-decoration:none;
	font-weight: 500;
	letter-spacing: 1px;
	color: #fff;
	margin: 0;
	line-height: 24px;
	border: 0px solid #5aa306;
	background: #dcdcdc;
	padding: 7px 20px;
	text-transform: uppercase;
	border-radius: 0;
	display: inline-block;
	z-index: 9;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;

 

  /* "to left" / "to right" - affects initial color */
  background: linear-gradient(to left, rgb(8, 75, 163) 50%, #FF0000 51%) right;
  background-size: 200%;
  transition: .5s ease-out;
}


.gallery .nav-tabs > li > a br {
	  display: none;
}

.gallery .nav > li > a:focus:before, .gallery .nav > li > a:hover:before {
	  width: 100%;
}

.gallery .nav-tabs > li.active > a:before {
	  width: 100%;
}

.gallery .nav > li > a:focus, .gallery .nav > li > a:hover {
   
    border-color: #ff8e00;
    color: #fff;
    background-position: left;
}

    1. background: linear-gradient(to left, rgb(8, 75, 163) 50%, #FF0000 51%) right;
    background-size: 200%;
    transition: .5s ease-out;

    2. background-position: left;
  • Example 2

    1. HTML

    

  <a href="#" class="btn2">Read More</a>

    2. CSS

    


.btn2 {
  width: 130px;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  line-height: 40px;
  margin: 10px 0 0 0;
  letter-spacing: .4px;
  padding: 0;
  border-radius: 25px;
  display: block;
  color: #fff;
  background: rgba(254, 89, 149, 1);
  background: -moz-linear-gradient(left, rgba(254, 89, 149, 1) 0%, rgba(255, 192, 43, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(254, 89, 149, 1)), color-stop(100%, rgba(255, 192, 43, 1)));
  background: -webkit-linear-gradient(left, rgba(254, 89, 149, 1) 0%, rgba(255, 192, 43, 1) 100%);
  background: -o-linear-gradient(left, rgba(254, 89, 149, 1) 0%, rgba(255, 192, 43, 1) 100%);
  background: -ms-linear-gradient(left, rgba(254, 89, 149, 1) 0%, rgba(255, 192, 43, 1) 100%);
  background: linear-gradient(to right, rgba(254, 89, 149, 1) 0%, rgba(255, 192, 43, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe5995', endColorstr='#ffc02b', GradientType=1);
  z-index: 2;
  position: relative;
  overflow: hidden;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}
.btn2:hover, .btn2:focus {
  color: #fff;
}
.btn2:after {
  position: absolute;
  content: '';
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  background: rgba(255, 192, 43, 1);
  background: -moz-linear-gradient(left, rgba(255, 192, 43, 1) 0%, rgba(254, 89, 149, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 192, 43, 1)), color-stop(100%, rgba(254, 89, 149, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 192, 43, 1) 0%, rgba(254, 89, 149, 1) 100%);
  background: -o-linear-gradient(left, rgba(255, 192, 43, 1) 0%, rgba(254, 89, 149, 1) 100%);
  background: -ms-linear-gradient(left, rgba(255, 192, 43, 1) 0%, rgba(254, 89, 149, 1) 100%);
  background: linear-gradient(to right, rgba(255, 192, 43, 1) 0%, rgba(254, 89, 149, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc02b', endColorstr='#fe5995', GradientType=1);
}
.btn2:hover:after, .btn2:focus:after {
  width: 100%;
}